<template>
  <div id="userAddressList">
    <Row>
      <Form label-position="right" inline>
        <FormItem label="开始时间：">
          <DatePicker v-model="queryForm.startTime" @on-change="changeStartDate" type="date"  split-panels
                      placeholder="请选择出场开始时间" format="yyyy-MM-dd 00:00:00">
          </DatePicker>
        </FormItem>
        <FormItem label="结束时间：">
          <DatePicker v-model="queryForm.endTime" @on-change="changeEndDate" type="date"  split-panels
                      placeholder="请选择出场结束时间" format="yyyy-MM-dd 23:59:59">
          </DatePicker>
        </FormItem>
        <FormItem label="车队名称：">
          <Select v-model="queryForm.fleetName" filterable placeholder="请输入车队名称" clearable>
            <template v-for="item in fleetNameList">
              <Option :value="item.orgName">
                {{item.orgName}}
              </Option>
            </template>
          </Select>
        </FormItem>
        <FormItem label="集装箱号：">
          <Input type="text" v-model="queryForm.ContainerNo"></Input>
        </FormItem>
        <Button type="primary" @click="foreCastSearch" icon="ios-search">搜索</Button>
      </Form>
    </Row>
    <Row>
      <div>
        <tablePage ref="containerTab" :api="getdistributionForeCast" :param="queryForm">
          <template slot-scope="props">
            <Table :columns="columns7" border :data="props.data"></Table>
          </template>
        </tablePage>
      </div>
    </Row>
  </div>
</template>
<script>
  import {
    getdistributionForeCast,
    confirmdistributionForeCast,
    getdistributionForeCastFleetName
  } from '@/api/backEnd/fleetOrder'
  import {getOwnFleet} from '@/api/backEnd/station'
  import tablePage from '@/components/table/tablePage.vue'
  // import _ from 'lodash'

  export default {
    name: 'userAddressList',
    data () {
      let pageDefault = {
        pageIndex: 1,
        pageSize: 10
      }
      let queryForm = {
        ContainerNo: '',
        fleetName: '',
        startTime: '',
        endTime: ''
      }
      let fleetNameList = []
      let columns7 = [
        {
          title: '序号',
          width: 100,
          render: (h, params) => {
            console.log(params)
            let thisIndex = params.row._index + 1
            if (this.pageDefault.pageIndex > 1) {
              thisIndex = thisIndex + (this.pageDefault.pageIndex - 1) * this.pageDefault.pageSize
            }
            return (<span>{thisIndex}</span>)
          }
        },
        {
          title: '发货人',
          key: 'shipper'
        },
        {
          title: '出场站时间',
          key: 'guardConfirmTime'
        },
        {
          title: '预计送达时间',
          key: 'diffTime'
        },
        {
          title: '车队名称',
          key: 'orgName'
        },
        {
          title: '车号',
          key: 'truckPlate'
        },
        {
          title: '司机名称',
          key: 'driverName'
        },
        {
          title: '集装箱号',
          key: 'containerNo'
        },
        {
          title: '货票号',
          key: 'waybillNo'
        },
        {
          title: '品名',
          key: 'pm'
        },
        {
          title: '重量',
          key: 'weight'
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            console.log(params.row)
            let currentUser = ''
            let isHd = false
            if (sessionStorage.getItem('currentUser')) {
              currentUser = JSON.parse(sessionStorage.getItem('currentUser'))
            }
            for (var i in currentUser.role) {
              console.log(currentUser.role[i])
              if (currentUser.role[i] === '电厂') {
                isHd = true
                break
              }
            }
            console.log('currentUser', currentUser)
            let btnArray = []
            let confirm = (<i-button type="primary" size="small" style="margin-right: 5px;"
              onClick={() => this.confirmdistributionForeCast(params.row.id)}>确认收货</i-button>)
            let success = (<span>完成</span>)
            let none = (<span>待出场站</span>)
            let nothing = (<span>待确认</span>)
            if (params.row.state === 6) {
              btnArray.push(success)
            } else if (params.row.guardConfirmTime && params.row.guardConfirmTime !== '' && params.row.state === 3) {
              btnArray.push(confirm)
            } else if (!isHd) {
              btnArray.push(nothing)
            } else {
              btnArray.push(none)
            }
            return btnArray
          }
        }
      ]
      let datas = {
        pageDefault,
        columns7,
        queryForm,
        getdistributionForeCast,
        confirmdistributionForeCast,
        getdistributionForeCastFleetName,
        fleetNameList,
        getOwnFleet
      }
      return datas
    },
    computed: {},
    methods: {
      foreCastSearch () {
        this.$refs['containerTab'].dataRefresh()
      },
      queryDataByPage () {
        this.$refs['containerTab'].dataRefreshCurrentPage()
      },
      queryData () {
        getdistributionForeCastFleetName().then(res => {
          if (res.data.isSuccess === 1) {
            console.log('fleetNameList', res.data.data)
            this.fleetNameList = res.data.data
          }
        })
      },
      changeStartDate (date) {
        this.queryForm.startTime = date
      },
      changeEndDate (date) {
        this.queryForm.endTime = date
      }
    },
    mounted () {
      this.queryData()
    },
    components: {
      tablePage
    }
  }
</script>
<style scoped>

</style>
